<template>
  <div>
    <div class="input-box">
      <span>{{ title }}</span>
      <input :type="type" :placeholder="placeholder" ref="input" v-model="value" />
      <div @click="changeImg" v-if="title == '密码' || title == '确认密码'">
        <img
          style="width: 22px; height: 14px;"
          src="../../assets/imgs/icon_隐藏.png"
          alt
          v-if="showeyes"
        />
        <img style="width: 22px; height: 14px;" src="../../assets/imgs/icon_可见.png" alt v-else />
      </div>
      <div
        class="time"
        v-if="time"
        @click="getCode"
        style="display: flex;justify-content: center;align-items: center;position: absolute;left: 290px;"
      >
        <span
          :style="styleObj"
        >{{ isGetCode ? Time + 's后重发' : '获取验证码' }}</span>
      </div>
    </div>
    <hr />
  </div>
</template>
<script>
export default {
  name: 'Input',
  props: ['title', 'placeholder', 'password', 'time'],
  data() {
    return {
      styleObj:{
        fontFamily: 'PingFangSC-Regular',
        fontSize: '12px',
        color:'#3070F0',
        letterSpacing: '-0.2px',
        lineHeight: '12px', 
        margin: '0',
        width: '60px'
      },
      showeyes: true,
      isGetCode: false,
      Time: 2,
      color: {
        'color': 'red'
      },
      value: ''

    }
  },
  watch: {
    value(newVal){
      this.$emit('input',this.title,newVal)
    }
  },
  computed: {
    type() {
      return this.password ? 'password' : 'text'
    }
  },
  methods: {
    changeImg() {
      this.showeyes = !this.showeyes
      this.$emit('changePassword', this.title)
    },
    getCode() {
      if (this.isGetCode) return
      this.isGetCode = true
      this.styleObj.color = '#A8ACB3'
      let timer
      timer = setInterval(() => {
        if (this.Time == 0) {
          this.isGetCode = false
      this.styleObj.color = '#3070F0 '
          this.Time = 3,
            clearInterval(timer)
        }
        this.Time--
      }, 1000)
    },
    // changeOpacity(){
    //   this.$emit('changeOpacity')
    // }
  },
}
</script>
<style scoped>
.input-box {
  width: 100%;
  padding: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
span {
  float: left;
  display: block;
  width: 80px;
  margin-right: 30px;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #25282e;
  letter-spacing: -0.23px;
  line-height: 16px;
}

input {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #25282d;
  letter-spacing: -0.23px;
  line-height: 16px;
  border: none;
  padding-left: 5px;
}
input:focus {
  outline: none;
}
input::placeholder {
  color: #a8acb3;
}
hr {
  width: 90%;
  margin: 0 auto;
  border: none;
  border-bottom: 1px dotted #ebedf0;
}

/* 倒计时 */
.time {
  width: 75px;
  height: 28px;
  background: #ebedf0;
  border-radius: 17px;
  border-radius: 17px;
}
</style>
